<template>
	<div>
		<!-- 面包屑导航 -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>商品管理</el-breadcrumb-item>
			<el-breadcrumb-item>商品列表</el-breadcrumb-item>
		</el-breadcrumb>
		
		<!-- 卡片视图 -->
		<el-card>
			<el-row :gutter="20">
				<el-col :span="8">
				 <el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @clear="getGoodsList">
						<el-button slot="append" icon="el-icon-search" @click="getGoodsList"></el-button>
					</el-input>
				</el-col>
				<el-col :span="4">
					<el-button type="primary" @click="goAddPage">添加商品</el-button>
				</el-col>
			</el-row>
			<!-- 商品表格 -->
			 <el-table :data="goodslist" stripe border>
			    <el-table-column type="index" label="#"></el-table-column>
			    <el-table-column label="商品名称" prop="goods_name"></el-table-column>
			    <el-table-column label="商品价格(元)" prop="goods_price" width="100px"></el-table-column>
					<el-table-column label="商品重量" prop="goods_weight" width="80px"></el-table-column>
					<el-table-column label="商品数量" prop="goods_number" width="80px"></el-table-column>
					<el-table-column label="创建时间" width="180px">
						<template slot-scope="scope">
							<!-- 调用过滤器 -->
							{{scope.row.add_time*1000 | dataFormat}}
						</template>
					</el-table-column>
					<el-table-column label="操作" width="180px">
						<template slot-scope="scope">
							<el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row.goods_id)"></el-button>
							<el-button type="danger" icon="el-icon-delete" size="mini" @click="removeById(scope.row.goods_id)"></el-button>
						</template>
					</el-table-column>
			  </el-table>
				<!-- 分页器 -->
				<el-pagination
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="queryInfo.pagenum"
					:page-sizes="[5, 10, 15, 20]"
					:page-size="queryInfo.pagesize"
					layout="total, sizes, prev, pager, next, jumper"
					:total="total" background>
				</el-pagination>
		</el-card>
		
		<!-- 编辑商品对话框 -->
		<el-dialog
		  title="编辑商品"
		  :visible.sync="editDialogVisible"
		  width="50%">
			<el-form :model="editForm" :rules="editRules" ref="editRef">
			  <el-form-item label="商品名称" prop="goods_name">
			    <el-input v-model="editForm.goods_name"></el-input>
			  </el-form-item>
				<el-form-item label="商品价格" prop="goods_price">
				  <el-input v-model="editForm.goods_price"></el-input>
				</el-form-item>
				<el-form-item label="商品重量" prop="goods_weight">
				  <el-input v-model="editForm.goods_weight"></el-input>
				</el-form-item>
				<el-form-item label="商品数量" prop="goods_number">
				  <el-input v-model="editForm.goods_number"></el-input>
				</el-form-item>
			</el-form>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="editDialogVisible = false">取 消</el-button>
		    <el-button type="primary" @click="saveEdit">确 定</el-button>
		  </span>
		</el-dialog>
		
	</div>
</template>

<script>
	export default {
		data() {
			return {
				// 获取列表查询参数
				queryInfo: {
					query: '',
					pagenum: 1,
					pagesize: 10
				},
				// 总页数
				total: 0,
				// 商品数据
				goodslist: [],
				// 显示隐藏编辑商品对话框
				editDialogVisible: false,
				// 编辑商品表单信息对象
				editForm: {},
				// 编辑商品表单验证规则
				editRules: {
					goods_name: [
						 { required: true, message: '请输入商品名称', trigger: 'blur' }
					],
					goods_price: [
						 { required: true, message: '请输入商品价格', trigger: 'blur' }
					],
					goods_weight: [
						 { required: true, message: '请输入商品重量', trigger: 'blur' }
					],
					goods_number: [
						 { required: true, message: '请输入商品数量', trigger: 'blur' }
					]
				}
			}
		},
		created() {
			this.getGoodsList()
		},
		methods: {
			// 获取商品列表
			async getGoodsList() {
				// 发起请求获取数据
				const {data : res} = await this.$http.get('goods', {params: this.queryInfo})
				
				// 判断状态码
				if(res.meta.status !== 200) {
					return this.$message.error('获取产品列表失败！')
				}
					this.$message.success('获取产品列表成功！')
					this.goodslist = res.data.goods
					this.total = res.data.total
					console.log(res.data)
			},
			
			// 每页条数发生变化触发
			handleSizeChange(newSize) {
				// 保存每页条数变化的值
				this.queryInfo.pagesize = newSize
				this.getGoodsList()
			},
			// 当前页发生变化触发
			handleCurrentChange(newNum){
				this.queryInfo.pagenum = newNum
				this.getGoodsList()
			},
			// 删除商品处理函数
			async removeById(id) {
				// 弹出删除提示框
				const confirmResult = await this.$confirm('此操作将永久删除该商品, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).catch((err) => {
						return err
					})
					
					// 判断用户是否点击了确认按钮
					if(confirmResult === 'confirm') {
						// 为真发生删除请求
						const {data : res } = await	this.$http.delete(`goods/${id}`) 
						// 判断状态码
						if(res.meta.status !== 200) {
							return this.$message.error('删除商品失败！')
						}
						this.$message.success('删除商品成功！')
						this.getGoodsList()
					}else {
						// 为假提示用户
						this.$message.info('你点击了取消按钮！')
					}
			},
			// 跳转到添加商品路由页面
			goAddPage() {
				this.$router.push('goods/add')
			},
			// 显示编辑商品对话框
			async showEditDialog(id) {
				this.editDialogVisible = true
				
				const { data : res} = await this.$http.get(`/goods/${id}`)
				
				// 判断状态码
				if(res.meta.status !== 200) return this.$http.error('查询商品信息失败：' + res.meta.msg)
				this.editForm = res.data
			},
			// 保存编辑商品信息
			async saveEdit() {
				// 发起请求
				const { data : res} = await this.$http.put(`/goods/${this.editForm.goods_id}`, this.editForm)
				// 判断状态码
				if(res.meta.status !==200) return this.$message.error('修改商品失败：' + res.meta.msg)
				this.$message.success(res.meta.msg)
				this.getGoodsList()
				this.editDialogVisible = false
			}
			
			
			
			
		}
	}
</script>

<style lang="less" scoped>
</style>
